<template>
  <el-scrollbar>
    <div v-for="item in state.RankingListData" :key="item">
      <el-row :gutter="20">
        <el-col :span="8">
          <img :src="item.coverImgUrl" fit="fill" />
        </el-col>
        <el-col :offset="1" :span="15">
          <h4>{{ item.name }}</h4>
          <span>更新时间：{{ time(item.updateTime) }}</span>
          <span>热度：{{ changCount(item.playCount) }}</span>
          <Songs :id="item.id" />
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<script>
import { reactive, onMounted } from 'vue'
import Songs from './songs'
import getRecommend from '../../request/recommend/recommend'
import { useStore } from 'vuex';
export default {
  setup() {
    const store = useStore()
    const state = reactive({
      RankingListData:{}
    })
    onMounted(async() => {
    let res = await getRecommend()
     state.RankingListData = res.data.list.slice(0,9)
    });
    return {state}
  },
  components:{
    Songs
  },
    methods: {
    changCount: function (num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + "亿";
      } else if (num < 100000000 && num >= 100000) {
        return (num / 100000).toFixed(1) + "万";
      }
    },
    time: function (tt) {
      var time = new Date(tt);
      var times = time.toLocaleDateString().replace(/\//g, "-");
      return times
    },
  },
};
</script>

<style lang="less" scoped>
.el-row {
  height: 300px;
  background-color: rgb(255, 255, 255);
  margin-bottom: 20px;
  box-shadow: 0px 2px 3.4px 0.6px rgba(0, 0, 0, 0.39);
  .el-col {
    border-radius: 4px;
    &:first-child {
      display: flex;
      align-items: center;
      padding: 0 !important;
      border-radius: 20px;
      p {
        height: 50px;
        width: 50px;
      }
    }
    &:last-child{
      h4{
        margin: 4px 0;
      }
      span{
        margin-right: 10px;
      }
    }
    p {
      margin: 5px 0;
    }
    img {
      height: 300px;
      width: 347px;
    }
    span {
      text-overflow: ellipsis !important;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    div {
      name {
        text-align: center;
      }
    }
  }
}
</style>